<template>
    <div>

    <div v-bind:class="{'fullofficebg':searchtype=='0','fullvouchebg':searchtype=='1'}" >
        <img v-if="isfocus"  @click="gotoback" class="fullgoback" src="../assets/goback.png">

        <div v-bind:class="{ 'fullsearchcontxtBg1':isfocus,'fullsearchcontxtBg':!isfocus}">

            <form class="fullformBg" @submit.prevent="submit">
                <input v-if="searchtype=='0'" class="fullsearchinput" @focus="checkBlur" type="search" placeholder="搜索办公用品" v-model="keyword">
                <input v-else class="fullsearchinput" @focus="checkBlur" type="search" placeholder="搜索凭证" v-model="keyword">

            </form>
        </div>
        <!--'office-text':type=='0','voucher-text':type=='1'-->
        <div v-if="isfocus" class="fullsearch-text" @click="close()">{{searchText}}
        </div>
    </div>

        <div v-if="commonList.length>0">
            <div v-if="isfocus">
                <div class="mui-flex" style=" border-bottom: 1px solid #e5e5e5" v-if="searchList.length>0">
                    <div class="cell4">
                        <div class="fullcustom-title">
                            <p>最近搜索</p>
                        </div>
                    </div>
                    <div class="cell" style="background-color: #f8f8f8;">
                        <div @click="deleteClick" style="padding-right: 0.3rem;padding-top: 0.1rem">
                            <p  class="fulldelete-title">删除记录</p>
                        </div>
                    </div>
                </div>
                <div v-for="(item,index) in searchList" style="z-index: 1000">
                    <div @click="CommonItem(index)">
                        <p class="fulltitle">{{item}}</p>

                    </div>
                </div>
            </div>
        </div>


    </div>

</template>

<script>
    export default {
        name: "fullSearch",
        data() {
            return {
                currentValue: '',
                type:'',
                isfocus:false,
                searchText:'搜索',
                keyword:'',
                searchList:[],
            };
        },
        props: {
            commonList: {
                type: Array,
                default() {
                    return []
                }
            },
            searchtype:{

                default:'0',// 0 是办公 1 凭证 0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f  3是默认颜色
            },

        },
        created()
        {

            var newAr=new Array();
            if (this.commonList.length>0)
            {
                for (var  i=this.commonList.length-1;i>=0;i--)
                {
                    newAr.push(this.commonList[i])
                }
            }

            this.searchList=newAr;

        },

        watch: {
            commonList:{
                handler(newValue,oldValue){


                    var newAr=new Array();
                    if (newValue.length>0)
                    {
                        for (var  i=newValue.length-1;i>=0;i--)
                        {
                            newAr.push(newValue[i])
                        }
                    }

                    this.searchList=newAr;




                },
                deep:true
            },

            keyword: function (newValue, oldValue) {//搜索关键字

                if (newValue === null || newValue === '' || newValue.length <= 0) {
                    this.keyword = '';
                } else {
                    this.keyword = newValue;
                }
                this.$emit('getKeyword',{'keyword':this.keyword}); //主动触发selectHead方法，'123'为向父组件传递的数据

            },
        },
        methods:
            {
                gotoback()
                {
                    this.isfocus=false;
                    this.keyword='';
                    this.$emit('gotoback',{'keyword':this.keyword});

                },
                checkBlur()
                {

                    this.isfocus=true;
                    this.$emit('checkBlur');


                },
                close() {
                    this.isfocus=false;
                    this.$emit('searchClick',{'keyword':this.keyword});


                },
                CommonItem(index)
                {
                    this.isfocus=false;
                    this.keyword=this.searchList[index];


                    this.$emit('lishiClick',{'keyword':this.keyword});

                },
                deleteClick(){

                    console.log('删除');
                    // localStorage.setItem('insthistorysearch', JSON.stringify
                    // ([]));
                    this.$emit('deleteClick',{'keyword':this.keyword});

                    this.isfocus=false;

                },
                 submit() {
                    //确定搜索

                },
            }
    }
</script>

<style scoped>

    .fullvouchebg
    {
        /*default:'0',// 0 是办公 1 凭证 0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f  3是默认颜色*/

        background-color: #83d16f;
        height: 55px;
    }
    .fullofficebg
    {
        background-color: #e9b778;
        height: 55px;
    }

    .fullsearchcontxtBg {
        position: absolute;
        top: 10px;
        height: 35px;
        left: 0.3rem;
        right: 10px;
        background-color: white;
        border-radius: 4px;
        border: 1px solid #e1e1e1;
    }
    .fullsearchcontxtBg1 {
        position: absolute;
        top: 10px;
        height: 35px;
        left: 0.6rem;
        right: 50px;
        background-color: white;
        border-radius: 4px;
        border: 1px solid #e1e1e1;
    }
    .fullgoback
    {
        margin: 0.28rem 0 0 10px;
        width: 0.2rem;
        height: 0.33rem;
        float: left;
    }
    .fullformBg {
        padding: 8px 0 10px 0;
    }

    .fullsearchinput {
        height: 100%;
        width: 100%;
        padding-left:10px;
        font-size: 0.25rem;
        border: 0px solid #e1e1e1;
    }

    .fulloffice-text {
        position: absolute;
        top: 15px;
        height: 35px;
        right: 10px;
        color: #e9b778;
        font-size: 0.25rem;

    }
    .fullvoucher-text {
        position: absolute;
        top: 15px;
        height: 35px;
        right: 10px;
        color: #83d16f;
        font-size: 0.25rem;

    }
    .fullsearch-text {
        position: absolute;
        top: 15px;
        height: 35px;
        right: 10px;
        color: white;
        font-size: 0.25rem;

    }
    .fullcustom-title {
        color: #9a9a9a;
        font-size: 0.2rem;
        text-align: left;
        padding-top: 0.25rem;
        padding-left: 0.3rem;
        padding-bottom: 0.15rem;
        background-color: #fafafa;

    }
    .fulltitle {
        font-size: 0.25rem;
        color: #858585;
        text-align: left;
        height: 50px;
        padding-top: 20px;
        margin: 0 10px 0 20px;
        border-bottom: 1px solid #e1e1e1;

    }
    .fulldelete-title
    {
        color: #9a9a9a;
        font-size: 0.2rem;
        text-align: center;

        /*width: 1.8rem;*/
        /*right: -5.6rem;*/
        /*top: -0.8rem;*/
        border: 1px solid #e5e5e5;
        padding: 0.1rem 0.2rem 0.1rem 0.2rem;
        border-radius: 4px;
        /*background-color: #fafafa;*/
    }
</style>